<html>

<head>
    <title>{{ title }} - My Flask Application</title>
</head>

<body>
    <div>
        {{ title }}
    </div>

    <div>
        <div>
            工号<input id='txtCode' maxlength="20" /> *输入工号，加载历史已提交信息
        </div>
        <div>
            姓名<input id='txtName' maxlength="20" />
        </div>
        <div>
            部门 <select id='sltDepart'>
                {% for user in users %}
                <option value="{{ user }} "> {{ user }}</option>
                {% endfor %}
            </select>
            <input id='txtDepart' maxlength="20" />
        </div>
        {% for i in range(1,5) %}
        <div>
            第{{ i }}课学习效果<input type="number" id='txtScore{{ i }}' maxlength="3" />
        </div>
        {% endfor %}
        <div>
            请按0~5打分
        </div>
        <div>
            其它问题或反馈<textarea id='txtRemark' maxlength="200"> </textarea>

        </div>
        <button onclick="sign()">提交</button>

    </div>

    <script src="/static/jquery-1.10.2.js"></script>
    <script>
        $(function () {
            $('#sltDepart').change(function () {
                var val = $('#sltDepart').val();
                $('#txtDepart').val(val);
            });
            $('#txtCode').change(function () {
                var val = $('#txtCode').val();
                if (!val)
                    return;
                var model = JSON.stringify({ code: val });
                $.ajax({
                    url: '/coll_get',
                    type: 'post',
                    dataType: 'json',
                    headers: {
                        "Content-Type": "application/json;charset=utf-8"
                    },
                    contentType: 'application/json; charset=utf-8',
                    data: model,
                    success: function (data) {
                        if (!data.code)
                            return;
                        $('#txtName').val(data.name);
                        $('#txtDepart').val(data.depart);
                        $('#txtRemark').val(data.remark);
                        for (var i = 1; i < 5; i++) {
                            $('#txtScore' + i).val(data["score" + i]);
                        }
                    },
                    error: function (data) {
                        // alert('获取历史信息失败');
                    }
                })
            });

        });
        function sign() {
            // var name = $('#txtName').val();
            // var data=JSON.stringify({name:name});
            // $.post('/sign_data',data,'application/json; charset=utf-8')
            // .success(function(){
            //     alert('签到成功');
            // })
            // .error(function(msg){
            //     alert(msg);
            // })
            var data1 = {
                code: $('#txtCode').val(),
                name: $('#txtName').val(),
                depart: $('#txtDepart').val(),
                remark: $('#txtRemark').val(),
                name: $('#txtName').val(),
                name: $('#txtName').val(),
                name: $('#txtName').val(),
            };
            for (var i = 1; i < 5; i++) {
                data1["score" + i] = $('#txtScore' + i).val();
            }
            var model = JSON.stringify(data1);
            $.ajax({
                url: '/coll_save',
                type: 'post',
                dataType: 'json',
                headers: {
                    "Content-Type": "application/json;charset=utf-8"
                },
                contentType: 'application/json; charset=utf-8',
                data: model,
                success: function (data) {
                    alert('提交成功');
                },
                error: function (data) {
                    alert('提交失败');
                }
            })
        }
    </script>
</body>

</html>